<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title=" "
    >
      <view class="segmentedBox">
        <u-subsection
          :list="subsectionList"
          :current="subsectionIndex"
          bgColor="#f5f5f5"
          @change="subsectionChange"
        >
        </u-subsection>
      </view>
    </u-navbar>
    <view class="content">
      <view class="item">
        <video
          class="video"
          src="https://media.w3.org/2010/05/sintel/trailer.mp4"
          controls
          object-fit='cover'
        ></video>
        <view class="title">汇来米机具绑定操作视频</view>
        <view class="time">2024-02-09</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      subsectionList: [
        {
          name: 'App教程',
        },
        {
          name: '机具操作',
        },
      ],
      subsectionIndex: 0,
    };
  },
  onLoad() {},
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    subsectionChange(index) {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  padding: 0 0 60rpx;
  text-align: center;
  background-color: #f5f5f5;
  .segmentedBox {
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 300rpx;
    z-index: 99;
  }
}

.content {
  position: relative;
  width: 100%;
  padding: 30rpx;
  .item {
    margin-bottom: 30rpx;
    width: 100%;
    padding: 0 0 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    .video {
      width: 100%;
      height: 300rpx;
    }
    .title {
      margin-top: 15rpx;
      width: 100%;
      padding: 0 30rpx;
      font-weight: 800;
      font-size: 32rpx;
      color: #333333;
      text-align: left;
    }
    .time {
      margin-top: 15rpx;
      width: 100%;
      padding: 0 30rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      text-align: left;
    }
  }
}
</style>
